<template>
  <view class="content-box1-1 commonDiv">
    <u-navbar
      leftText="返回"
      title="检查详情"
      :safeAreaInsetTop="true"
      @leftClick="backPre"
      >
        <view
          class="u-nav-slot"
          slot="right"
          @click="backTo"
        >
        <view class="icon iconfont icon-shouye" style="font-weight: 600;"></view>
      </view>
    </u-navbar>
    <view class="top">
      <studentInfo :studentList="studentList"></studentInfo>
    </view>
    <view class="bottom">
      <!-- <u-steps :current="2" activeColor="#00796B">
        <u-steps-item v-for="(item,index) in list" :key="index" :title="item.title" :desc="item.des"></u-steps-item>
      </u-steps> -->
      <view class="list-outer">
        <view v-for="(item,index) in list" :key="index" :class="'list-status ' + (item.status == 1? 'list-status-done': 'list-status-unDone') + (item.index == activeProject ? ' active-roject': '')">
          <view class="status-inner">
            <view>{{item.project}}</view>
            <view :class="'status-des ' + (item.status == 1? 'des-done': 'des-unDone')">{{item.status == 1 ? '已完成' : '未完成'}}</view>
          </view>
        </view>
      </view>
      <view class="bottom-inner">
        <firstDetail v-if="activeProject == 1" ref="firstChild" :studentId="studentId"></firstDetail>
        <secondDetail v-if="activeProject == 2" ref="secondChild" :studentId="studentId"></secondDetail>
        <thirdDetail v-if="activeProject == 3" ref="thirdChild" :studentId="studentId"></thirdDetail>
      </view>
    </view>
    <quick-message ref="message"></quick-message>
  </view>
</template>
<script>
import studentInfo from '@/pages/components/studentInfo' 
import firstDetail from '@/pages/home/first/first-detail' 
import secondDetail from '@/pages/home/second/second-detail' 
import thirdDetail from '@/pages/home/third/third-detail'
import mRequest from '@/api/index.js'
import hccmStore from '@/common/hccm-store.js'
export default {
  components:{studentInfo,firstDetail,secondDetail,thirdDetail},
  data() {
    return{
      studentId:'', //学生id
      activeProject: '',//需要检查哪一项
      studentList: [],
      list:[],
    }
  },
  onLoad(options){
    console.log(options)
    this.studentId = options.studentId
    this.activeProject = options.activeProject
    if(this.activeProject){
       uni.setNavigationBarTitle({
        title: this.activeProject == 1 ? '第一项检查详情':  this.activeProject == 2 ? '第二项检查详情':  this.activeProject == 3 ? '第三项检查详情': '检查详情'
      });
    }
    if(this.activeProject == 1){
      setTimeout(()=>{
        this.loadBaseConfig()
      },100)
    }else if(this.activeProject == 2){
      setTimeout(()=>{
        this.$refs.secondChild.getInspectDetailList()
      },100)
    }else if(this.activeProject == 3){
      setTimeout(()=>{
        this.$refs.thirdChild.getInspectDetailList()
      },100)
    }
    this.getStudentInfo()
    this.getStudentDetail()
  },
  methods:{
    backPre(){
      uni.navigateBack({
        delta: 1 // delta值为1时表示返回上一级页面
      })
    },
    backTo(){
      uni.reLaunch({
        url: '/pages/home/index'
      })
    },
    //获取项目体检状态
    getStudentDetail(){
      mRequest.studentDetail({
        studentId: this.studentId,
        inspectId: hccmStore.getChooseInspectId()
      }).then(res=>{

        // status：0 未开始 1 已完成
        this.list = []
        let done = res.studentDto.inspectDetails.filter(val=>{
          return val.status == 1
        })
        let doing = res.studentDto.inspectDetails.filter(val=>{
          return val.status == 0
        })
        this.list = done.concat(doing)
        this.list.map(item=>{
          item.index = item.project == '第一项' ? 1 : item.project == '第二项' ? 2 : item.project == '第三项' ? 3 : 4
        })
      })
    },

    // 通过id获取学生信息
    getStudentInfo(){
      mRequest.inspectStudentList({
        limit: 10,
        page: 1,
        id: this.studentId,
        inspectId: hccmStore.getChooseInspectId()
      }).then(res=>{
        this.studentList = res.data.records
        console.log('this.studentList',this.studentList)
      })
    },
    // 获取第一项的配置项
    loadBaseConfig(){
      this.$refs.firstChild.loadConfig()
      this.$refs.firstChild.getInspectDetailList()
    }
  }
};
</script>

<style lang="scss">
.content-box1-1 {
  width: 100%;
  padding: 100px 20px 20px;
  box-sizing: border-box;
  height: 100vh;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  flex-wrap: wrap;
  .top{
    width: 100%;
  }  
  .bottom{
    margin-top: 20px;
    flex: 1;
    width: 100%;
    box-shadow: 0 1px 10px $u-primary-disabled;
    background: #f5f5f5;
    padding: 20px;
    border-radius: 10px;
    box-sizing: border-box;
    overflow: auto;
    display: flex;
    flex-direction: column;
    .bottom-inner{
      margin-top: 16px;
      padding: 10px 20px !important;
      padding-bottom: 0 !important;
      background: #fff;
      border-radius: 10px;
      .bottom-title{
        font-size: 18px;
        color: #333;
        font-weight: 600;
        position: relative;
        text-indent: 10px;
        margin: 10px 0 14px 0;
      }
      .bottom-title:before{
        content: '';
        height: 80%;
        width: 4px;
        background: $u-primary;
        position: absolute;
        left: 0;
        top: 5%;
        border-radius: 4px;
      }

      .text-box{
        font-size: 16px;
        padding: 18px 0;
        .text-box-title{
          color: #333;
        }
      }
    }

    .bottom-box{
      margin-top: 20px;
      .u-button{
        width: fit-content;
        padding: 0 80px;
        font-size: 16px;
      }
    }
  }
  ::deep(.u-form-item__body__right){
    flex: none;
  }
  ::deep(.u-form-item__body){
    width: 260px;
  }
  ::deep(.u-text){
    justify-content: center !important;
    .u-text__value{
      font-size: 16px !important;
    }
    .u-text__value--tips{
      font-size: 12px !important;
    }
  }
  ::deep(.u-steps-item__wrapper){
    background: #f5f5f5;
  }
  ::deep(.u-input__content__subfix-icon){
    .u-icon{
      .u-icon__icon{
        span{
          display: none !important;
        }
      }
    }
  }
  .u-form-item{
    padding-bottom: 10px;
    position: relative;
  }
  ::deep(.u-form-item__body__right__message){
    position: absolute !important;
    bottom: 0px !important;
  }

}
.list-outer{
  padding: 10px 0 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  .list-status{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 160px;
    position: relative;
    .status-inner{
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 60px;
      z-index: 100;
      .status-des{
        color: #999;
        font-size: 14px;
      }
      .des-done{
        color: #00796B;
      }
    }
  }
  .list-status:after{
    position: absolute;
    content: '';
    right: -40px;
    top: 0;
    height: 4px;
    width: 80px;
    // border-top: 2px dotted red;
    z-index: 111;
  }
  .list-status-done:after{
    border-top: 2px dotted #00796B;
  }
  .list-status-unDone:after{
    border-top: 2px dotted #999;
  }
  .list-status:last-of-type:after{
    display: none;
  }

  .active-roject:before{
    content: '';
    position: absolute;
    background: url('@/static/img/location.png');
    background-size: 20px 20px;
    bottom: -40px;
    left: 44%;
    width: 20px;
    height: 20px;
    -webkit-animation: bounce-up 1.4s linear infinite;
    animation: bounce-up 1.4s linear infinite;
  }
  @-webkit-keyframes bounce-up {
    25% {-webkit-transform: translateY(5px);}
    50%, 100% {-webkit-transform: translateY(0);}
    75% {-webkit-transform: translateY(-5px);}
  }

  @keyframes bounce-up {
    25% {transform: translateY(5px);}
    50%, 100% {transform: translateY(0);}
    75% {transform: translateY(-5px);}
  }
}
.bottom-inner{
  flex: 1;
  background: rgb(109, 16, 31);
}
</style>